<template>
    <div>
        <div class="title-bar">
            <span><icon-font href="#cehuifu"/>&nbsp;回复</span>
        </div>
        <post-editor v-model="content"></post-editor>
        <div class="operate-box center-flex-box">
            <el-button @click="publish">发布</el-button>
            <el-button @click="content=''">重置</el-button>
        </div>
    </div>
</template>

<script>
    import PostEditor from '@/components/post/PostEditor'

    export default {
        name: 'postComment',
        components: {
            PostEditor
        },
        data () {
            return {
                content: ''
            }
        },
        methods: {
            publish () {
                this.$emit('publish', this.content)
                this.content = ''
            }
        }
    }
</script>

<style lang="scss" scoped>
    .center-flex-box {
        vertical-align: top;
        display: -webkit-inline-flex;
        justify-content: center;
        align-items: center;
    }

    .title-bar {
        text-align: left;
    }

    .operate-box {
        height: 80px;
        width: 100%;
    }
</style>
